<!--
 * @Author: 小花
 * @Date: 2022-04-11 20:40:47
 * @LastEditors: 小花
 * @LastEditTime: 2022-04-27 11:00:13
 * @FilePath: /vue3-teap/src/views/main/MainView.vue
 * @Description:
-->
<template>
  <el-container>
    <el-header>
      <HeaderView @getCollapse="getCollapse" />
    </el-header>
    <el-container>
      <el-aside class="left_menu">
        <AsideView :setCollapse="setCollapse" />
      </el-aside>
      <el-container>
        <el-main>
          <div class="shade">
            <router-view v-slot="{ Component }">
              <keep-alive>
                <component :is="Component" />
              </keep-alive>
            </router-view>
          </div>
        </el-main>
        <el-footer>
          <FooterView />
        </el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script lang='ts'>
import { defineComponent, ref } from 'vue'
import HeaderView from './layout/HeaderView.vue'
import FooterView from './layout/FooterView.vue'
import AsideView from './layout/AsideView.vue'

export default defineComponent({
  name: 'MainView',
  components: {
    HeaderView,
    FooterView,
    AsideView
  },
  setup () {
    const setCollapse = ref(false)
    const getCollapse = (isCollapse: boolean) => { setCollapse.value = isCollapse }
    return {
      getCollapse,
      setCollapse
    }
  }
})
</script>

<style lang='scss' scoped>
@import url('/node_modules/font-awesome/css/font-awesome.min.css');
.el-container {
  width: 100%;
  height: 100%;
  .el-header {
    background: #1a1a1a; /* 深色背景 */
    background-image: linear-gradient(
      to bottom,
      #2c2c2c 0%,
      #1a1a1a 100%
    );
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
    border-radius: 10px 10px 0 0;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
  }
  .el-aside {
    width: auto;
    height: 100%;
    background: #2c3e50; /* 深色背景，与菜单匹配 */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* 添加右侧阴影 */
    transition: all 0.3s; /* 添加过渡效果 */
  }
  .el-main {
    height: 100%;
    background: #f0f2f5; /* 更柔和的背景色 */
    z-index: 1;
    padding: 15px;
    .shade {
      z-index: 0;
      background: #fff;
      height: auto;
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); /* 柔和阴影 */
    }
  }
  .el-footer {
    height: auto;
  }
}
</style>
